<template>
  <div id="app" class="mdui-bottom-nav-fixed">
    <router-view />
    <!--MDUI实现-->
<div class="mdui-bottom-nav tab-bar">
  <a @click="gotoHome()" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">home</i>
    <label>首页</label>
  </a>
  <a @click="gotoFenLei()" class="mdui-ripple">
    <i class="mdui-icon material-icons">filter_list</i>
    <label>分类</label>
  </a>
  <a @click="gotoGouWuChe()" class="mdui-ripple">
    <i class="mdui-icon material-icons">add_shopping_cart</i>
    <label>购物车</label>
  </a>
    <a @click="gotoMe()" class="mdui-ripple">
      <i class="mdui-icon material-icons">face</i>
      <label>我的</label>
    </a>
</div>

      <!--
        无UI库实现
    <div class="tab-bar">
      <div class="tab-bar-item" @click="gotoHome()">首页</div>
      <div class="tab-bar-item" @click="gotoFenLei()">分类</div>
      <div class="tab-bar-item" @click="gotoGouWuChe()">购物车</div>
      <div class="tab-bar-item" @click="gotoMe()">我的</div>
    </div>
      -->
  </div>
</template>

<style>
  @import "./assets/css/base.css";
</style>

<script>
  export default {
    name: 'Home',
    components: {

    },
    methods: {
      gotoHome() {
        this.$router.push('/')
      },
      gotoFenLei() {
        this.$router.push('/FenLei')
      },
      gotoGouWuChe() {
        this.$router.push('/GouWuChe')
      },
      gotoMe() {
        this.$router.push('/Me')
      },

    }
  }
</script>